<template>
  <div class="top__nav">
    <span style="color:#7e8c8d; margin-left: -50px"></span>
    <div>
      <el-dropdown>
        <span class="el-dropdown-link">
          欢迎您，{{name}}
        </span>
        <el-dropdown-menu slot="dropdown">
          <router-link to="/personInfo">
            <el-dropdown-item>
              <i class="iconfont icon-yonghu" ></i>
              个人信息
            </el-dropdown-item>
          </router-link>
          <router-link to="/resetPassword">
            <el-dropdown-item>
              <i class="iconfont icon-mima" ></i>
              修改密码
            </el-dropdown-item>
          </router-link>
        </el-dropdown-menu>
      </el-dropdown>
      <span @click="quit"><i class="iconfont icon-guanji loginOut" ></i></span>
    </div>
  </div>
</template>

<script>
export default {
  name: "right__nav",
  data(){
    return{
      userName:''
    }
  },
	created() {
		this.userName = this.$store.state.userData.chineseName ;
	},
	computed:{
  	// 监听用户名
		name(){
			this.userName = this.$store.state.userData.chineseName ;
			let name = this.userName;
			return name
		}
	},
	methods:{
		 quit(){
  		this.$confirm('确定退出吗？',{
			  confirmButtonText: "确定",
			  cancelButtonText: "取消",
			  type: "warning",
		  }).then(async () =>{
		  	await this.$Http.loginOut().then(res =>{
				  this.$message({
					  message:'退出成功！',
					  type:'warning',
				  });
				  this.$router.push('/')
			  })
		  }).catch(() =>{
			  this.$message({
				  type: "info",
				  message: "已取消退出",
			  });
		  })

	  }
  }
}
</script>

<style scoped lang="scss">
.top__nav{
  height: 40px;
  line-height:40px;
  display: flex;
  justify-content: space-between;
  margin-right: 20px;

  .loginOut{
    cursor: pointer;
  }
  span:first-child{
    font-size: 24px;
    color: #333333;
    letter-spacing: 0.41px;
  }
  .el-dropdown-link{
    font-size: 12px!important;
    margin-right: 10px;
    cursor: pointer;
  }
}

</style>
